<template>
  <div style="background: #eee">
    <van-nav-bar title="个人信息页" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" style="color: #000; font-size: 24px" />
      </template>
    </van-nav-bar>
    <van-cell style="display: flex; align-items: center; margin-top: 5px">
      <template #title> 头像 </template>
      <template #right-icon>
        <div style="display: flex; align-items: center">
          <!-- <img :src="userImg" alt="" style="width: 50px; height: 50px; border: 1px solid #eee; margin: 5px" /> -->
           <Image :dataSrc="userImg" alt="" style="width: 50px; height: 50px; border: 1px solid #eee; margin: 5px" ></Image>
        </div>
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="router.push('/nickname')" title="昵称"
      is-link :value="nickname"></van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="gotogender">
      <template #title> 性别 </template>
      <template #right-icon>
        <img src="../../images/iconGirl.png" alt="" v-if="sex == '女'" />
        <img src="../../images/iconBoy.png" alt="" v-else />
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="router.push('/signs')">
      <template #title> 体征 </template>
      <template #right-icon>
        <div class="hhh">
          <div>{{ height ? height : '身高' }}cm</div>
          <div>{{ weight ? weight : '体重' }}kg</div>
          <div>{{ age ? age : '年龄' }}</div>
        </div>
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" :value="email">
      <template #title> 邮箱 </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px">
      <template #title> 绑定微信 </template>
      <template #right-icon>
        去绑定
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="gotoAuthentication">
      <template #title> 实名认证 </template>
      <template #right-icon>
        去认证
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="gotoBangding">
      <template #title> 绑定银行卡 </template>
      <template #right-icon>
        去绑定
        <van-icon name="arrow" />
      </template>
    </van-cell>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { userStore } from '../../stores/user'
import Image from '../../components/image/index.vue'

// 获取仓库
const getUser = userStore();

// 昵称
const user = ref(JSON.parse(localStorage.getItem('result') as string) || '');
const nickname = user.value.nickName;

// 邮箱
const email = user.value.email;

// 性别
const sex = ref(getUser.sex || '');

// 体征
const signs = ref(getUser.signsData);
const height = signs.value.height;
const weight = signs.value.weight;
const age = signs.value.age;


const router = useRouter()
const gotoAuthentication = () => {
  router.push("/authentication")
}
const gotoBangding = () => {
  router.push("/binding")
}
const onClickLeft = () => {
  router.push('/manage')
}
const gotogender = () => {
  router.push("/gender")
}

const userImg = JSON.parse(localStorage.getItem("result") as string).headPic;
</script>

<style>
@import './bank.scss';
</style>